<template>
  <div>

    <h1 style="margin: 30px auto;text-align: center">在线留言</h1>
    <el-divider content-position="center">Online Message</el-divider>
    <el-row :gutter="60">
      <el-col :span="10" :offset="2">
        <img src="../assets/message.jpg" alt="" style="width: 550px ">
      </el-col>
      <el-col :span="10">
        <el-form label-width="80px" :model="message">
          <el-form-item label="电话:">
            <el-input v-model="message.telephone"></el-input>
          </el-form-item>
          <el-form-item label="机构:">
            <el-input v-model="message.mechanism"></el-input>
          </el-form-item>
          <el-form-item label="邮箱:">
            <el-input v-model="message.mail"></el-input>
          </el-form-item>
          <el-form-item label="主题:">
            <el-input v-model="message.theme"></el-input>
          </el-form-item>
          <el-form-item label="内容:" >
<!--            <textarea wrap="hard" v-model="message.text"></textarea>-->
            <el-input v-model="message.text" type="textarea" :rows="10"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add()" size="medium">提交</el-button>
            <el-button type="warning" @click="reset" size="medium">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Message",
  data() {
    return{
      message:{},
    }
  },
  methods:{
    reset(){
      this.message={}
    },
    add(){
      this.message.text = this.message.text.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;');
      request.post("/onlineMessage/add", this.message).then(res => {
        if (res.code === 200) {
          this.$message.success( "成功")
          this.reset()
        } else {
          this.$message.error("失败")
        }
      })
    }
  }
}
</script>

<style scoped>

</style>